<!DOCTYPE html>
<html>
<head>
    <title>Physics Wave Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: white;
        }
    </style>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="400"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.font = 'italic 20px "Times New Roman"';

    // Helper function to draw an arrow at the end of a line
    function drawArrow(fromX, fromY, toX, toY, angle, length) {
        const ang = Math.atan2(toY - fromY, toX - fromX);
        const x1 = toX - length * Math.cos(ang - angle);
        const y1 = toY - length * Math.sin(ang - angle);
        const x2 = toX - length * Math.cos(ang + angle);
        const y2 = toY - length * Math.sin(ang + angle);

        ctx.beginPath();
        ctx.moveTo(toX, toY);
        ctx.lineTo(x1, y1);
        ctx.moveTo(toX, toY);
        ctx.lineTo(x2, y2);
        ctx.stroke();
    }
    
    // Helper function for drawing lines with arrows
    function drawLineWithArrow(fromX, fromY, toX, toY) {
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.stroke();
        drawArrow(fromX, fromY, toX, toY, Math.PI / 8, 10);
    }
    
    // Helper function to draw vector symbol over a character
    function drawVectorSymbol(x, y, width) {
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(x + width, y);
        ctx.stroke();
        drawArrow(x, y, x + width, y, Math.PI / 8, 8);
    }
    
    // --- Main Drawing ---
    
    // 1. Coordinate System
    ctx.font = 'italic 22px "Times New Roman"';
    // x-axis
    drawLineWithArrow(300, 240, 300, 20);
    ctx.fillText('x', 310, 35);
    // z-axis
    drawLineWithArrow(40, 180, 560, 180);
    ctx.fillText('z', 565, 185);
    // Extra horizontal line
    ctx.beginPath();
    ctx.moveTo(200, 220);
    ctx.lineTo(400, 220);
    ctx.stroke();


    // 2. Top Diagram
    // Wave 1 (horizontal)
    const y1_top = 70;
    drawLineWithArrow(40, y1_top, 450, y1_top);
    
    // E1 label and symbol
    ctx.font = 'italic 24px "Times New Roman"';
    ctx.fillText('E', 70, 55);
    drawVectorSymbol(70, 38, 15);
    ctx.font = 'italic 16px "Times New Roman"';
    ctx.fillText('1', 88, 60);
    // Polarization symbol (vertical double arrow)
    drawLineWithArrow(80, y1_top + 15, 80, y1_top - 15);
    drawLineWithArrow(80, y1_top - 15, 80, y1_top + 15);
    
    // Wave 2 (slanted)
    const x2_start_top = 100;
    const y2_start_top = 140;
    const x2_end_top = 480;
    const y2_end_top = 60;
    drawLineWithArrow(x2_start_top, y2_start_top, x2_end_top, y2_end_top);
    
    // E2 label and symbol
    const e2_x_top = 140;
    const e2_y_top = 131;
    ctx.font = 'italic 24px "Times New Roman"';
    ctx.fillText('E', e2_x_top, e2_y_top + 25);
    drawVectorSymbol(e2_x_top, e2_y_top + 8, 15);
    ctx.font = 'italic 16px "Times New Roman"';
    ctx.fillText('2', e2_x_top + 18, e2_y_top + 30);
    // Polarization symbol (circle with dot)
    ctx.beginPath();
    ctx.arc(e2_x_top + 8, e2_y_top, 7, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(e2_x_top + 8, e2_y_top, 1.5, 0, 2 * Math.PI);
    ctx.fill();

    // Angle alpha_02
    ctx.beginPath();
    ctx.moveTo(x2_start_top, y2_start_top);
    ctx.lineTo(x2_start_top + 80, y2_start_top);
    ctx.stroke();
    ctx.beginPath();
    const angle_top = Math.atan2(y2_start_top - y2_end_top, x2_end_top - x2_start_top);
    ctx.arc(x2_start_top, y2_start_top, 60, 0, -angle_top, true);
    ctx.stroke();
    ctx.font = 'italic 20px "Times New Roman"';
    ctx.fillText('α', 155, 130);
    ctx.font = 'italic 14px "Times New Roman"';
    ctx.fillText('02', 168, 135);


    // 3. Bottom Diagram
    // Wave 1 (horizontal)
    const y1_bottom = 270;
    drawLineWithArrow(40, y1_bottom, 450, y1_bottom);

    // E1 label and symbol
    ctx.font = 'italic 24px "Times New Roman"';
    ctx.fillText('E', 70, 255);
    drawVectorSymbol(70, 238, 15);
    ctx.font = 'italic 16px "Times New Roman"';
    ctx.fillText('1', 88, 260);
    // Polarization symbol (vertical double arrow)
    drawLineWithArrow(80, y1_bottom + 15, 80, y1_bottom - 15);
    drawLineWithArrow(80, y1_bottom - 15, 80, y1_bottom + 15);

    // Wave 2 (slanted)
    const x2_start_bottom = 150;
    const y2_start_bottom = 340;
    const x2_end_bottom = 530;
    const y2_end_bottom = 260;
    drawLineWithArrow(x2_start_bottom, y2_start_bottom, x2_end_bottom, y2_end_bottom);
    
    // E2 label and symbol
    const e2_x_bottom = 220;
    const e2_y_bottom = 326;
    ctx.font = 'italic 24px "Times New Roman"';
    ctx.fillText('E', e2_x_bottom, e2_y_bottom + 25);
    drawVectorSymbol(e2_x_bottom, e2_y_bottom + 8, 15);
    ctx.font = 'italic 16px "Times New Roman"';
    ctx.fillText('2', e2_x_bottom + 18, e2_y_bottom + 30);
    // Polarization symbol (circle with dot)
    ctx.beginPath();
    ctx.arc(e2_x_bottom + 8, e2_y_bottom, 7, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(e2_x_bottom + 8, e2_y_bottom, 1.5, 0, 2 * Math.PI);
    ctx.fill();

</script>
</body>
</html>